<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #my{
            border: 1px solid black;
            background-color: yellow;
            width: 300px;
            height: 200px;
            position: absolute;
            top: 100px;
            left: 200px;
        }
        .one{
            transform: skew(20deg,30deg);
            -moz-transform: skew(20deg,30deg);
        }
        .two{
            transform: skew(80deg,10deg);
            -moz-transform: skew(80deg,10deg);
        }
        .three{
            transform: skew(-40deg,-10deg);
            -moz-transform: skew(-40deg,-10deg);
        }
    </style>
</head>
<body>
<div id="my">
    <p>MyDiv</p>
    <p><input type="radio" onclick="one()">skew(20deg,30deg)</p>
    <p><input type="radio" onclick="two()">skew(80deg,10deg)</p>
    <p><input type="radio" onclick="three()">skew(-40deg,-10deg)</p>
</div>

</body>
<script type="text/javascript">
    function one(){
        var rad=document.getElementById("my");
        rad.className="one";
    }
    function two(){
        var rad=document.getElementById("my");
        rad.className="two";
    }
    function three(){
        var rad=document.getElementById("my");
        rad.className="three";
    }
</script>
</html>